<template>
    <div class="usercenter">
        <div class="orangeBg"></div>
        <div class="card">
            <div class="user-img">
                <span class="name">
                    <img :src="headImgUrl">
                    <span style="display: flex; flex-direction: column">
                        <span class="name_item">{{info.userName}} <span class="name_level">{{agencyLevel}}</span></span>
                        <span class="name_item1"><p>上级: {{fatherName || '&nbsp;&nbsp;—&nbsp;&nbsp;'}}</p> &nbsp;|&nbsp;<p>级别: {{ fatherAgencyLevel || '&nbsp;&nbsp;—&nbsp;&nbsp;'
                            }}</p></span>
                    </span>
                </span>
                <p class="edit" @click="got('message')">编辑</p>
            </div>
            <div class="user-detail"
                 @click="got('memberCard', {userId: info.userId, shareCode: info.shareCode, agencyLevel: info.agencyLevel})">
                <p>查看会员名片 > </p>
            </div>
            <div class="user-count">
                <ul>
                    <li>
                        <p class="count-num">{{info.performance ? info.performance : '-'}}</p>
                        <p>累计总金额</p>
                    </li>
                    <li>
                        <p class="count-num">{{info.localMonthPerformance ? info.localMonthPerformance : '-'}}</p>
                        <p>当月累计</p>
                    </li>
                    <li>
                        <p class="count-num">{{info.orderGoodsCount ? info.orderGoodsCount : '-'}}</p>
                        <p>下单总数</p>
                    </li>
                    <li>
                        <p class="count-num">{{info.memberCount ? info.memberCount : '-'}}</p>
                        <p>会员数量</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="part2">
            <ul class="block-item">
                <li @click="got('myOrder')">
                    <i class="icon icon-1"></i>
                    <p>我的订单</p>
                </li>
                <li @click="got('memberOrder')">
                    <i class="icon icon-2"></i>
                    <p>会员订单</p>
                </li>
                <li @click="got('userRelation')">
                    <i class="icon icon-3"></i>
                    <p>会员图谱</p>
                </li>
                <li @click="got('bankCard')">
                    <i class="icon icon-4"></i>
                    <p>绑定银行卡</p>
                </li>
            </ul>
            <ul class="block-item">
                <li @click="got('rewardRecord', {totalBonus: info.totalBonus || 0})">
                    <i class="icon icon-6"></i>
                    <p>奖金记录</p>
                </li>
                <li @click="got('scan')">
                    <i class="icon icon-7"></i>
                    <p>扫码出货</p>
                </li>
                <li @click="got('address')">
                    <i class="icon icon-8"></i>
                    <p>地址管理</p>
                </li>
                <li @click="got('refundOrder')">
                    <i class="icon icon-13"></i>
                    <p>退换货订单</p>
                </li>
            </ul>
        </div>
        <div style="height: 15rem;">
            <div style="width:100%;height:10px;background:#f8f8f8;"></div>
            <ul class="list-item">
                <li @click="got('myComplains')">
                    <i class="icon icon2 icon-9"></i>
                    <p class="text">我的投诉</p>
                    <div v-if="info.complaintCount > 0">
                        <span class="dot"></span>
                        <i class="icon icon-arrow"></i>
                    </div>
                </li>
                <li @click="got('myComments')">
                    <i class="icon icon2 icon-10"></i>
                    <p class="text">我的评价</p>
                    <i class="icon icon2 icon-arrow"></i>
                </li>
            </ul>
            <ul class="list-item">
                <li @click="message()">
                    <img class="icon1" :src="iconImgUrl"/>
                    <p class="text">邀请注册</p>
                    <i class="icon icon2 icon-arrow"></i>
                </li>
                <li @click="got('about')">
                    <i class="icon icon2 icon-12"></i>
                    <p class="text">关于我们</p>
                    <i class="icon icon2 icon-arrow"></i>
                </li>
                <!--<li>-->
                <!--<i class="icon icon-11"></i>-->
                <!--<p class="text">修改密码</p>-->
                <!--<i class="icon icon-arrow"></i>-->
                <!--</li>-->
                <!--<li @click="logout">-->
                <!--<i class="icon icon-12"></i>-->
                <!--<p class="text">登出</p>-->
                <!--<i class="icon icon-arrow"></i>-->
                <!--</li>-->
            </ul>
        </div>
        <my_footer currentTab="me"></my_footer>
    </div>
</template>

<script>
    import My_footer from "_components/footer/footer";
    import {getMemberInfo, getFatherInfo, agencyList, getShareCode} from '_common/services/user'
    import base from '_common/services/base';
    import {getCookie, setCookie} from '@/utils/cookiesUtil.js'
    import {MessageBox} from 'element-ui'
    import {getQuery} from '@/utils/utils'
    import wxLogin from '_common/wxLogin.js'
    const agency = ['一星', '二星', '三星', '九星'];
    export default {
        name: 'personalCenter',
        data() {
            return {
                info: {},
                baseUrl: base.test,
                headImgUrl: getCookie('headImgUrl') || require('_images/avatar.jpg'),
                agencyLevel: '',
                fatherName: '',
                fatherAgencyLevel: '',
                iconImgUrl: require('_images/ic_Invitationtoregister.png'),
                agencyList: [],
            }
        },
        computed: {},
        async beforeMount() {
            await wxLogin(this.getData);
        },
        methods: {
            getData (){
                this.getInfo();
                agencyList().then(res => {
                    if (res && res.code === 0) {
                        this.agencyList = res.data
                    } else {
                        this.$alertTip(res.msg || '获取用户等级失败请稍后再试')
                    }
                });
            },
            getShareCode (id) {
                getShareCode(id).then(res => {
                    if (res && res.code === 0) {
                       let sharecode = res.data
                        this.$openRouter({
                            name: 'memberNewCard',
                            query: {
                                userId: this.info.userId,
                                shareCode: sharecode,
                                agencyLevel: this.info.agencyLevel,
                                agencyId: id
                            },
                        });
                    }
                    else {
                        this.$alertTip(res.msg || '获取邀请码失败')
                    }

                }, reject => {
                    this.$alertTip('获取邀请码失败')
                })
            },
            getInfo () {
                getMemberInfo().then(res => {
                    if (res && res.code === 0) {
                        this.info = res.data
                        setCookie('userId', res.data.userId);
                        this.agencyLevel = this.info.agencyLevel === 9 ? '九星' : agency[this.info.agencyLevel - 1];
                        this.headImgUrl = this.info.imagePath;
                        if (this.info.fatherUserId) {
                            getFatherInfo(this.info.fatherUserId).then(res => {
                                if (res && res.code === 0) {
                                    if (res.data) {
                                        this.fatherName = res.data.userName
                                        //this.fatherAgencyLevel = agency[res.data.agencyLevel - 1] ? agency[res.data.agencyLevel - 1] : '一星';
                                        this.fatherAgencyLevel = res.data.agencyLevel === 9 ? '九星' : (agency[res.data.agencyLevel - 1] ? agency[res.data.agencyLevel - 1] : '一星');
                                    }
                                } else {
                                    this.$alertTip(res.msg || '获取失败请稍后再试')
                                }
                            }, reject => {
                                this.$alertTip('获取失败请稍后再试')
                            })
                        }
                    }
                    else {
                        this.$alertTip(res.msg || '获取失败请稍后再试')
                    }
                }, reject => {
                    this.$alertTip('获取失败请稍后再试')
                })
            },
            got (name, param = {}) {
                if (name === 'rewardRecord') {
                    if (this.info.agencyLevel !== 3 && this.info.agencyLevel !== 9) {
                        this.$alertTip('很抱歉！您的等级需要达到三星或者九星，才能进行查看！')
                        return false
                    }
                }
                if (name === 'scan') {
                    this.$alertTip('功能正在开发中，敬请期待！')
                    return false
                }
                else if (name === 'about') {
                    window.location.href = 'http://www.nineunity.cn/'
                    return false
                }
                this.$openRouter({
                    query: param,
                    name: name
                })
            },
            message() {
                if (this.info.agencyLevel === 1) {
                    this.$alertTip('等级权限不足，不允许邀请注册');
                    return false;
                }
                else {
                    this.formMsg()
                }

            },
            formMsg () {
                const h = this.$createElement;
                MessageBox({
                    message: h('div',
                        {style: 'box-sizing: border-box;font-size: 16px; color: white;'},
                        [
                            h('div', {style: 'color: #333;font-size: 18px; text-align: center;margin-bottom: 20px;'}, '邀请注册'),
                            this.info.agencyLevel >= 3 && h('div', {
                                on: {
                                    click: () => {
                                        this.getShareCode(this.agencyList[0].id)
                                    }
                                },
                                style: 'position: relative; border-radius: 8px; background-color: #7a64d0;box-sizing: border-box; width: 240px; height: 55px;'
                            }, [
                                h('div', {style: 'height: 100%; width: 100%; display: flex;justify-content: center;align-items: center;',}, '三星'),
                                h('img', {
                                    attrs: {src: require('./assets/ic_3.png')},
                                    style: 'display: inline-block;position: absolute;left: 18px;top: 50%;transform: translateY(-50%); width: 35px; height: 35px;'
                                }, '')
                            ]),
                            h('div', {
                                on: {
                                    click: () => {
                                        this.getShareCode(this.agencyList[1].id)
                                    }
                                },
                                style: 'position: relative; border-radius: 8px; background-color: #73bfcd;box-sizing: border-box; width: 240px; height: 55px; margin-top: 10px'
                            }, [
                                h('div', {style: 'height: 100%; width: 100%; display: flex;justify-content: center;align-items: center;',}, '二星'),
                                h('img', {
                                    attrs: {src: require('./assets/ic_2.png')},
                                    style: 'display: inline-block;position: absolute;left: 18px;top: 50%;transform: translateY(-50%); width: 35px; height: 35px;'
                                }, '')
                            ]),
                            h('div', {
                                on: {
                                    click: () => {
                                        this.getShareCode(this.agencyList[2].id)
                                    }
                                },
                                style: 'position: relative; border-radius: 8px; background-color: #5adb5d;box-sizing: border-box; width: 240px; height: 55px; margin-top: 10px'
                            }, [
                                h('div', {style: 'height: 100%; width: 100%; display: flex;justify-content: center;align-items: center;',}, '一星'),
                                h('img', {
                                    attrs: {src: require('./assets/ic_1.png')},
                                    style: 'display: inline-block;position: absolute;left: 18px;top: 50%;transform: translateY(-50%); width: 35px; height: 35px;'
                                }, '')
                            ]),
                        ]
                    ),
                    customClass: 'message-ui',
                    showConfirmButton: false,
                    showClose: false,
                }).then(() => {
                });
            },
            myFunction() {
                alert('succeed');
            }
        },
        components: {My_footer}
    }
</script>
<style lang="less">
    @import "../../css/common1";
    @import "../../css/commonlayout";

    .usercenter {
        background: #f8f8f8;
        padding: 44px 0px 100px;
        box-sizing: border-box;
        .orangeBg {
            background-color: @color_orange;
            height: 226px;
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 1;
        }
        .card {
            margin: auto 32px;
            margin-bottom: 20px;
            padding: 38px 28px;
            background: #fff;
            border-radius: 6px;
            box-sizing: border-box;
            box-shadow: 0 2px 10px rgba(243, 161, 58, 0.3);
            position: relative;
            z-index: 2;
            .user-img {
                .flex(space-between);
                margin-bottom: 66px;
                img {
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    margin-right: 20px;
                    border: 2px solid #eee;
                }
                .name {
                    font-size: 20px;
                    color: #999;
                    display: flex;
                    align-items: center;
                    .name_item {
                        margin-top: 15px;
                        font-size: 32px;
                        color: #333;
                        display: flex;
                        align-items: center;
                        .auto();
                        .name_level {
                            margin-left: 10px;
                            font-size: 28px;
                            border: 1px solid #ffce39;
                            border-radius: 5px;
                            padding: 0 2px;
                        }

                    }
                    .name_item1 {
                        display: flex;
                        margin-top: 15px;
                    }
                }
                .edit {
                    font-size: 24px;
                    color: #999;
                    margin-top: -80px;
                }
            }
            .user-detail {
                position: absolute;
                top: 114px;
                right: 0;
                background-color: #ffce39;
                font-size: 22px;
                color: #fff;
                width: 192px;
                line-height: 46px;
                padding-left: 20px;
                box-sizing: border-box;
                border-radius: 20px 0 0 20px;
            }
            .user-count {
                ul {
                    font-size: 22px;
                    color: #999;
                    .flex(space-between);
                    li {
                        text-align: center;
                        .count-num {
                            font-size: 30px;
                            color: #333;
                            margin-bottom: 16px;
                        }
                    }
                }
            }
        }
        .icon {
            background-image: url('~@/images/personal-icons.png');
            background-repeat: no-repeat;
            width: 70px;
            height: 70px;
            vertical-align: middle;
            display: inline-block;
            background-size: 100%;
        }
        .icon2 {
            width: 50px;
            height: 50px;
        }
        .icon1 {
            width: 1.3rem;
            height: 1.3rem;
            padding: 0 0.45rem 0 0.2rem;
        }
        .block-item {
            background-color: #fff;
            .flex(space-between);
            text-align: center;
            width: 100%;
            margin: auto;
            font-size: 24px;
            color: #333;
            padding: 0 60px;
            box-sizing: border-box;
            padding-top: 40px;
            .icon {
                margin-bottom: 24px;
                &.icon-2 {
                    background-position: 0px -82px;
                }
                &.icon-3 {
                    background-position: 0px -164px;
                }
                &.icon-4 {
                    background-position: 0px -8.4rem;
                }
                &.icon-5 {
                    background-position: 0px -247px;
                }
                &.icon-6 {
                    background-position: 0px -328px;
                }
                &.icon-7 {
                    background-position: 0px -13.7rem;
                }
                &.icon-8 {
                    background-position: 0px -16.5rem;
                }
                &.icon-13 {
                    background-position: 0px -32rem;
                }
            }
            &:nth-child(2) {
                padding-bottom: 40px;
            }
        }
        .list-item {
            margin-top: 20px;
            padding: 0 32px;
            background-color: #fff;
            li {
                margin-bottom: 0px;
                padding: 0;
                & > p {
                    line-height: 88px;
                }
                &:last-child {
                    border-bottom: none;
                }
                .icon {
                    margin-right: 12px;
                    &.icon-9 {
                        background-position: 0px -13.7rem;
                    }
                    &.icon-10 {
                        background-position: 0px -15.6rem;
                    }
                    &.icon-11 {
                        //background-position: 0px -19.8rem;
                    }
                    &.icon-12 {
                        background-position: 4px -19.5rem;
                    }
                    &.icon-arrow {
                        background-position: -0.2rem -21.4rem;
                        margin-right: -6px;
                    }
                }
                .text {
                    .auto();
                    text-align: left;
                }
                .dot {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    display: inline-block;
                    background: #f00;
                    margin-right: -10px;

                }
            }
        }
    }

</style>